<template>
    <div class="layout">
        <header>
            <div class="left_container">A 0 0</div>
            <div class="map_container">
                <img src="../../../assets/images/map/圣心医院.png"> 
            </div>
            <div class="right_container">0 0 B</div>
        </header>
        <main>
            <div class="left_sur">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="right_sur">
            </div>
        </main>
    </div>
</template>

<script setup lang='ts'>
</script>
<style scoped lang='scss'>
.layout {
    background: #fff;
    display: grid;
    width: 80%;
    grid-template-rows: 40px 120px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
    overflow: hidden;
    transition: 0.37s all;

    &:hover {
        transform: scale(1.1);
        box-shadow: 2px 4px 8px rgba(0, 0, 0, .37)
    }

    header {
        display: grid;
        grid-template-columns: 40% 20% 40%;

        .left_container {
            background: #cba448;
            display: flex;
            align-items: center;
            padding-left: 1em;
            font-size: 0.9em;
            color: #fff;
        }

        .map_container {
            background: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
            font-size: 1.5em;
            img{
                width: 100%;
                height: 100%;
            }
        }

        .right_container {
            background: #a44435;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 1em;
            font-size: 0.9em;
            color: #fff;
        }
    }

    main {
        display: grid;
        grid-template-columns: 65% 35%;

        .left_sur {
            display: grid;
            grid-template-columns: repeat(2, 1fr);


            &>div {
                @include useTheme {
                    border-bottom: 1px solid getVar('layoutBcolor');
                }

                background: #999;

                // 奇数项添加右边框
                &:nth-child(odd) {
                    @include useTheme {
                        border-right: 1px solid getVar('layoutBcolor');
                    }
                }
            }
        }

        .right_sur {
            background: #333;

            @include useTheme {
                border-left: 1px solid getVar('layoutBcolor');
            }
        }
    }
}
</style>